<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>轮播图</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        #imgs {
            width: 520px;
            height: 280px;
            margin: 0 auto;
            position: relative;
        }
        
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
            text-align: center;
        }
        
        #ul1 li {
            display: none;
        }
        
        #ul1 .mr {
            display: block;
        }
        
        #ul2 {
            display: flex;
            position: absolute;
            left: 10px;
            bottom: 10px;
        }
        
        #ul2 li {
            margin: 2px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            /*border-radius: 50%;*/
            color: #fff;
            background-color: #000;
        }
        
        #ul2 .mrl {
            background-color: red;
        }
        
        #zuo {
            width: 25px;
            height: 25px;
            background-image: url(img/biao.png);
            background-size: auto 100%;
            position: absolute;
            right: 38px;
            bottom: 10px;
        }
        
        #you {
            width: 25px;
            height: 25px;
            background-image: url(img/biao.png);
            background-size: auto 100%;
            background-position: -25px 0;
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="imgs">
        <ul id="ul1">
            <li class="mr"><img src="img/01.jpg" alt=""></li>
            <li><img src="img/02.jpg" alt=""></li>
            <li><img src="img/03.jpg" alt=""></li>
            <li><img src="img/04.jpg" alt=""></li>
            <li><img src="img/05.jpg" alt=""></li>
        </ul>
        <ul id="ul2">
            <li class="mrl">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <div id="zuo"></div>
        <div id="you"></div>

    </div>
</body>

</html>
<script>
    var j = 0;
    var m = 0
    var times = setInterval(changep, 1000);
    function changep() {
        j++;
        if (j >= $('#ul1 li').length) {
            j = 0
        }
           shows(j)
    }
    // 按数字播放
    $('#ul2 li').mouseenter(function () {
        var k = $(this).index()
        j = k

        shows(j)
    })
    // 函数
    function shows(index){
        // index = j 
        
        $('#ul1 li').eq(j).addClass('mr').siblings().removeClass('mr')
        $('#ul2 li').eq(j).addClass('mrl').siblings().removeClass('mrl')
    }


    //    点击
    $('#imgs #zuo').click(function () {
        // console.log(j)
        j --
        if (j < 0) {
            j = $('#ul1 li').length-1
        }
        shows(j)
    })
    $('#imgs #you').click(function () {
        // console.log(j)
        j ++
        if (j >= $('#ul1 li').length) {
            j = 0
        }
        shows(j)
    })

    //    停止
    $('#imgs').hover(function () {
        clearInterval(times);
    }, function () {
        times = setInterval(changep, 1000);
    })

</script>